<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      text-decoration: none;/*无下划线*/
      font-size: 24px;
      color: #333334;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .el-menu-item a {
      text-decoration: none;/*无下划线*/
      font-size: 24px;
    }
    .user{
      text-decoration: none;/*无下划线*/
      font-size: 24px;
      color: #333334;
      display:block;
      margin-top:17px;
      margin-right: 15px;
    }
    .el-carousel__item h3 {
      color: #d52f04;
      font-size: 18px;
      opacity: 0.75;
      line-height: 500px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      height:500px ;
    }

    .el-carousel__item:nth-child(2n+1) {
      height:500px ;
    }
    .butten{
      height: 30px;
      display: flex;/*设置为弹性容器*/
      align-items: center; /*定义div1的元素垂直居中*/
      justify-content: center; /*定义div1的里的元素水平居中*/
      margin-top: 20px;
      margin-bottom: 1px;

    }
    .butten a{
      text-decoration: none;/*无下划线*/
      font-size: 16px;
      color: #b3b3b3;

    }

    .H3{
      float-offset: 50px;
      font-size: 28px;
      margin-top: 15px;
      margin-bottom: 10px;
      font-weight:bold;

    }
    .el-input-group__append button {
      border-radius: 0px;
      color: white;
    }
    .el-icon-search:before{
      color: white;
    }
    .el-input-group__append{
      margin: 0px;
      border-radius: 0px;
      border-color:#d52f04 ;
      padding-bottom: 1px;

    }
    /*搜索框属性*/
    .el-input__inner {
      border-radius: 0px;
      color: #d52f04;
      border:1px;

    }
  </style>
</head>
<body>
<div id="app" >
  <el-container>
    <div  style="background-color: white;margin: 0 auto" >

      <el-header style="width: 1200px;margin: 0 auto">
        <!--导航开始-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" style="font-size: 24px"><a href="index.html" >首页</a></el-menu-item>
          <el-menu-item index="2" style="font-size: 24px"><a href="homepage.html" >个人主页</a></el-menu-item>
          <el-menu-item index="3" style="font-size: 24px"><a href="shopping%20cart.html" >购物车</a></el-menu-item>
          <el-menu-item index="4" style="font-size: 24px"><a href="user%20control.html" >用户管理</a></el-menu-item>
          <!--登录注册靠右边-->
          <el-menu-item index="6" style="float: right"><a href="reg.html" >注册</a></el-menu-item>
          <el-menu-item index="5" style="float: right"><a href="login.html">登录</a></el-menu-item>

        </el-menu>
        <!--导航结束-->
        <div class="line"></div><!--不明白用处的-->

      </el-header>

      <!--内容-->
      <div id="page-wrapper" class="gray-bg" style="background-color: white">
        <el-main style=" width:1200px;margin: 0 auto">
          <!--gutter设置间距-->
          <el-row gutter="30">
            <el-col span="6">

              <!--左边两个div内容填充-->
              <el-card>
                <div style="width: 200px;height: 200px; background: #333334;">

                </div>
                <div >
                  <el-aside width="250px" style="background-color: rgb(238, 241, 246);overflow: hidden">
                    <!--分组，看实际需求进行调整-->
                    <el-menu :default-openeds="['1', '3']">
                      <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>待审核</template>
                        <el-menu-item-group>
                          <el-menu-item index="1-1">选项1</el-menu-item>
                          <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                          <template slot="title">选项4</template>
                          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                        </el-submenu>
                      </el-submenu>
                      <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>会员列表</template>
                        <el-menu-item-group>
                          <template slot="title">分组一</template>
                          <el-menu-item index="2-1">选项1</el-menu-item>
                          <el-menu-item index="2-2">选项2</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                      <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>商品管理</template>
                        <el-menu-item-group>
                          <el-menu-item index="3-1">选项1</el-menu-item>
                          <el-menu-item index="3-2">选项2</el-menu-item>
                        </el-menu-item-group>

                      </el-submenu>
                    </el-menu>
                  </el-aside>
                </div>

              </el-card>

              <!--左边两个div内容填充结束-->
            </el-col>
            <!--右边内容-->
            <el-col span="18">
              <el-card>
                <div style="height: 600px">
                  <!-- 右边内容 -->
                  <el-main>
                    <el-table :data="userArr">
                      <el-table-column prop="user" label="用户名" width="130">
                      </el-table-column>
                      <el-table-column prop="name" label="姓名" width="130">
                      </el-table-column>
                      <el-table-column prop="number" label="手机号" width="190px">
                      </el-table-column>
                      <el-table-column prop="role" label="角色" width="130px">
                      </el-table-column>
                      <el-table-column prop="money" label="积分" width="130px">
                      </el-table-column>
                      <!--删除按钮-->
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button
                                  size="mini"
                                  type="danger"
                                  @click=" userDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                      <!--按钮结束-->
                    </el-table>
                  </el-main>
                  <!--右边内容结束-->
                </div>

              </el-card>
              <!--在上一个布局里面嵌套一个新的布局仍然是24分栏-->
              <el-row gutter="20">

              </el-row>

            </el-col>
          </el-row>
        </el-main>
      </div>
    </div>


  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex: '2',
        emp:{user:"",name:"",number:"",role:"",money:""},
        activeIndex: '1',
        activeIndex2: '1',
        input: '',
        fits: [ 'cover'],
        url: 'https://www.jianshen8.com/uploads/allimg/200619/5_200619094307_1.jpg',
        userArr:[
          {user: '待添加', name: '待添加', number: '15818881888', role: '程序员', money: '100',},
          {user: '待添加1', name: '待添加2', number: '16818881688', role: '程序员', money: '100', },
          {user: '待添加2', name: '待添加3', number: '18818881668', role: '程序员', money: '100',}],
        activeIndex: '4',
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      /*添加方法*/
      add(){
        let e = {
          name:v.emp.name,
          user:v.emp.user,
          number:v.emp.number,
          role:v.emp.role,
          money:v.emp.money
        }
        v.userArr.push(e);
      },
      /*弹窗,待定*/
      open() {
        this.$prompt('请输入', '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',

                }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '成功添加用户: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      /*删除方法*/
      userDelete(i,user){
        v.userArr.splice(i,1);
        v.$message("删除了用户："+user.user)
      },
    }
  })
  /*获取窗口自适应大小*/
  function myFunction() {
    var cliWidth = document.body.clientWidth;
    var cliHeigth = document.body.offsetHeight;
    var divWidth = cliWidth;
    var divHeight = cliHeigth;
    $('#page-wrapper').css("width", divWidth+"px");
    $('#page-wrapper').css("height", divHeight+"px");
  }
  myFunction();
</script>
</html>